<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket 客户端</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #messages {
            border: 1px solid #ccc;
            padding: 10px;
            height: 200px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        .messageInput {
            width: 80%;
            padding: 5px;
        }

        #sendButton {
            padding: 5px 10px;
        }
    </style>
</head>

<body>
<h1>WebSocket 客户端</h1>
<div id="messages"></div>

<input type="text" class="messageInput" id="messageInput" placeholder="消息">
<button id="sendButton">发消息</button>

<hr>
<br>
<br>

<h3>群控：</h3>

<label for="type">类型：</label>
<select id="type" class="messageInput">
    <option value="1">开启</option>
    <option value="2">关闭</option>
</select>
<br>
<br>
<label for="key_words">关键词：</label>
<input type="text" id="key_words" class="messageInput" placeholder="关键词，英文逗号分隔">
<br>
<br>
<label for="time_out">时长：</label>
<input type="number" class="messageInput" id="time_out" placeholder="时长">
<button id="sendAll">发送</button>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    const ws = new WebSocket('ws://localhost:8080/ws/link');
    const messagesDiv = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');
    const sendButton = document.getElementById('sendButton');

    const typeSelect = document.getElementById('type');
    const keyWordsInput = document.getElementById('key_words');
    const timeOutInput = document.getElementById('time_out');
    const sendAllButton = document.getElementById('sendAll');


    ws.onopen = () => {
        console.log('WebSocket connection established.');
    };

    ws.onmessage = (event) => {
        const message = event.data;
        const messageElement = document.createElement('div');
        messageElement.textContent = `服务端: ${message}`;
        messagesDiv.appendChild(messageElement);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
    };

    ws.onclose = () => {
        console.log('WebSocket connection closed.');
    };

    ws.onerror = (error) => {
        console.error('WebSocket error:', error);
    };

    sendButton.addEventListener('click', () => {
        const message = messageInput.value;
        if (message) {
            ws.send(message);
            const messageElement = document.createElement('div');
            messageElement.textContent = `客户端: ${message}`;
            messagesDiv.appendChild(messageElement);
            messageInput.value = '';
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
    });

    sendAllButton.addEventListener('click', () => {
        const type = typeSelect.value;
        const keyWords = keyWordsInput.value;
        const timeOut = timeOutInput.value;

        $.ajax({
            url: 'http://localhost:8080/ws/send_to_all',
            type: "POST",
            dataType: "json",
            contentType: "application/json",
            data: JSON.stringify({
                "type": type,
                "key_words": keyWords,
                "time_out": Number(timeOut)
            }),
            success: function (data) {
                //成功后执行的操作
            },
            error: function (data) {
                // 请求失败后执行的操作
            }
        })
    });
</script>
</body>

</html>